

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="CodeHope">
  <meta name="author" content="CodeHope">
  <meta name="keywords" content="希望">
  <title>Redux-小小指南①-入门 - CodeHope</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      
        
          
          
          
        
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/themes/prism-tomorrow.min.css" />
      
      
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/plugins/line-numbers/prism-line-numbers.min.css" />
      
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"quancundexiwang.wang","root":"/","version":"1.8.7","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":true,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"onlypost":true},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":"Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz","app_key":"hMuhiD4FRqhns4giqLiEH9HG","server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
  <header style="height: 80vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>CodeHope</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                村头
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                我
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('http://qiniuyun.quancundexiwang.wang/cropped-1920-1080-922540.jpg') repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="Redux-小小指南①-入门">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-06-10 22:48" pubdate>
        2021年6月10日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      2.4k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      32
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">Redux-小小指南①-入门</h1>
            
            <div class="markdown-body">
              <h1 id="Redux-小小指南①-入门"><a href="#Redux-小小指南①-入门" class="headerlink" title="Redux-小小指南①-入门"></a>Redux-小小指南①-入门</h1><p><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html">参考资料</a></p>
<blockquote>
<p>React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。</p>
</blockquote>
<ul>
<li>代码结构</li>
<li>跨组件之间的通信的便利</li>
</ul>
<p>对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。</p>
<blockquote>
<p>为了解决这个问题，2014年 Facebook 提出了 <a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2016/01/flux.html">Flux</a> 架构的概念，引发了很多的实现。2015年，<a target="_blank" rel="noopener" href="https://github.com/reactjs/redux">Redux</a> 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。</p>
</blockquote>
<h2 id="1-你可能不需要-Redux"><a href="#1-你可能不需要-Redux" class="headerlink" title="1.你可能不需要 Redux"></a>1.你可能不需要 Redux</h2><blockquote>
<p>简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。</p>
</blockquote>
<ul>
<li>用户的使用方式非常简单</li>
<li>用户之间没有协作</li>
<li>不需要与服务器大量交互，也没有使用 WebSocket</li>
<li>视图层（View）只从单一来源获取数据</li>
</ul>
<p>上面这些情况，都不需要使用 Redux。</p>
<ul>
<li>用户的使用方式复杂</li>
<li>不同身份的用户有不同的使用方式（比如普通用户和管理员）</li>
<li>多个用户之间可以协作</li>
<li>与服务器大量交互，或者使用了WebSocket</li>
<li>View要从多个来源获取数据</li>
</ul>
<p>上面这些情况才是 Redux 的适用场景：多交互、多数据源。</p>
<p>从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。</p>
<blockquote>
<ul>
<li>某个组件的状态，需要共享</li>
<li>某个状态需要在任何地方都可以拿到</li>
<li>一个组件需要改变全局状态</li>
<li>一个组件需要改变另一个组件的状态</li>
</ul>
</blockquote>
<p>发生上面情况时，如果不使用 Redux 或者其他状态管理工具，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。</p>
<p>总之，不要把 Redux 当作万灵丹，如果你的应用没那么复杂，就没必要用它。另一方面，Redux 只是 Web 架构的一种解决方案，也可以选择其他方案。</p>
<h2 id="2-Redux设计思想"><a href="#2-Redux设计思想" class="headerlink" title="2.Redux设计思想"></a>2.Redux设计思想</h2><p>Redux 的设计思想很简单，就两句话。</p>
<p>（1）Web 应用是一个状态机，视图与状态是一一对应的。</p>
<p>（2）所有的状态，保存在一个对象里面。</p>
<h2 id="3-基本概念和-API"><a href="#3-基本概念和-API" class="headerlink" title="3.基本概念和 API"></a>3.基本概念和 API</h2><p><img src="http://qiniuyun.quancundexiwang.wang/image-20210610081818092.png" srcset="/img/loading.gif" alt="image-20210610081818092"></p>
<h3 id="3-1-Store-【图书馆】"><a href="#3-1-Store-【图书馆】" class="headerlink" title="3.1 Store 【图书馆】"></a>3.1 <code>Store </code>【图书馆】</h3><p style='color:#035766;background:#feb856;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【Store 就是保存数据的地方，你可以把它看成一个容器，类比成一个图书馆。整个应用只能有一个 Store。(Flux可以有多个)】</p>

<p>Redux 提供<code>createStore</code>这个函数，用来生成 Store。</p>
<h3 id="3-2-Reducer【操作手册】"><a href="#3-2-Reducer【操作手册】" class="headerlink" title="3.2 Reducer【操作手册】"></a>3.2 <code>Reducer</code>【操作手册】</h3><p style='color:#035766;background:#feb856;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【Reducer,你可以把它理解成为一个图书馆的操作手册，里面记录了操作图书馆里面书籍的信息以及一些操作】</p>

<p style='color:#815abd;background:#fcdc01;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
整个应用的初始状态，可以作为 State 的默认值 (defaultState)】</p>

<p><code>LibraryReducer.js</code></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> defaultState <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    libraryName<span class="token operator">:</span> <span class="token string">"CodeHope"</span><span class="token punctuation">,</span>
    books<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">&#123;</span>
            book_name<span class="token operator">:</span> <span class="token string">"狂人日记"</span><span class="token punctuation">,</span>
            book_position<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
        <span class="token punctuation">&#123;</span>
            book_name<span class="token operator">:</span> <span class="token string">"孔乙己"</span><span class="token punctuation">,</span>
            book_position<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
        <span class="token punctuation">&#123;</span>
            book_name<span class="token operator">:</span> <span class="token string">"朝花夕拾"</span><span class="token punctuation">,</span>
            book_position<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
        <span class="token punctuation">&#123;</span>
            book_name<span class="token operator">:</span> <span class="token string">"阿Q正传"</span><span class="token punctuation">,</span>
            book_position<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">LibraryReducer</span><span class="token punctuation">(</span><span class="token parameter">state <span class="token operator">=</span> defaultState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token comment">//添加新的课本的操作</span>
        <span class="token keyword">case</span> <span class="token string">"add_book"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
            state<span class="token punctuation">.</span>books<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
            <span class="token keyword">break</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
        <span class="token comment">//删除新的课本的操作</span>
        <span class="token keyword">case</span> <span class="token string">"remove_book"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">const</span> aimName <span class="token operator">=</span> action<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
            state<span class="token punctuation">.</span>books <span class="token operator">=</span> state<span class="token punctuation">.</span>books<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
                <span class="token keyword">return</span> item<span class="token punctuation">.</span>book_name <span class="token operator">!==</span> aimName<span class="token punctuation">;</span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
            <span class="token keyword">break</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token keyword">return</span> state<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
 <p style='color:#eaf1f8;background:#443da6;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【注意】由于 Reducer 是纯函数，就可以保证同样的State，必定得到同样的 View。但也正因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。上面直接去修改state的写法是不太合适的</p>

<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">LibraryReducer</span><span class="token punctuation">(</span><span class="token parameter">state <span class="token operator">=</span> defaultState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            
        <span class="token comment">//添加新的课本的操作</span>
        <span class="token keyword">case</span> <span class="token string">"add_book"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
                libraryName<span class="token operator">:</span> state<span class="token punctuation">.</span>libraryName<span class="token punctuation">,</span>
                books<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>state<span class="token punctuation">.</span>books<span class="token punctuation">,</span> action<span class="token punctuation">.</span>value<span class="token punctuation">]</span>
            <span class="token punctuation">&#125;</span>
        <span class="token punctuation">&#125;</span>
            
        <span class="token comment">//删除新的课本的操作</span>
        <span class="token keyword">case</span> <span class="token string">"remove_book"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">const</span> aimName <span class="token operator">=</span> action<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
            <span class="token keyword">const</span> res <span class="token operator">=</span> state<span class="token punctuation">.</span>books<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
                <span class="token keyword">return</span> item<span class="token punctuation">.</span>book_name <span class="token operator">!==</span> aimName<span class="token punctuation">;</span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
            <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
                libraryName<span class="token operator">:</span> state<span class="token punctuation">.</span>libraryName<span class="token punctuation">,</span>
                books<span class="token operator">:</span> res
            <span class="token punctuation">&#125;</span>
        <span class="token punctuation">&#125;</span>
        <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">return</span> state<span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p style='color:#815abd;background:#fcdc01;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象。】</p>

<p>下一步，我们根据这个手册来生成store</p>
<p><code>store/index.js</code></p>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span>createStore<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"redux"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> LibraryReducer <span class="token keyword">from</span> <span class="token string">"@/store/libraryReducer"</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>
    LibraryReducer
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> store<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>然后呢我们就可以在其他地方使用这个store了！</p>
<p><code>Library.jsx</code></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">"@/store"</span><span class="token punctuation">;</span><span class="token comment">//引入store,，到后面会使用provider，这里先这样写</span>
<span class="token keyword">import</span> <span class="token punctuation">&#123;</span>TextField<span class="token punctuation">,</span> Button<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"@material-ui/core"</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Library</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">&#123;</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//getState通过getState将这个数据注入到我们的组件</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
            newBookName<span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
            books<span class="token operator">:</span> store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>books<span class="token punctuation">,</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

    <span class="token comment">/*
    @name: handleAddNewBook
    @description: store去dispatch去添加book
    @author: ChangHao
    @time: 2021-06-10 08:57:06
    */</span>
    <span class="token function">handleAddNewBook</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>newBookName<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
        <span class="token comment">//这里的位置就随机生成把！</span>
        <span class="token keyword">const</span> position <span class="token operator">=</span> <span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
        <span class="token comment">//点击添加操作的时候派发一个action，这个action是手册中（reducer存在的，目的就是为了执行手册中的某个方法！）</span>
        store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
            type<span class="token operator">:</span> <span class="token string">"add_book"</span><span class="token punctuation">,</span>
            value<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
                book_name<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>newBookName<span class="token punctuation">,</span>
                book_position<span class="token operator">:</span> position
            <span class="token punctuation">&#125;</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
        <span class="token comment">//重新获取数据去更新组件渲染新的数据！</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
            books<span class="token operator">:</span> store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>books<span class="token punctuation">,</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token comment">/*
    @name: handleRemoveBook
    @description: dispatch去删除store中的book
    @author: ChangHao
    @time: 2021-06-10 08:56:38
    */</span>
    <span class="token function">handleRemoveBook</span><span class="token punctuation">(</span><span class="token parameter">book_name</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
            type<span class="token operator">:</span> <span class="token string">"remove_book"</span><span class="token punctuation">,</span>
            value<span class="token operator">:</span> book_name
        <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
        <span class="token comment">//重新获取数据去更新组件渲染新的数据！</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
            books<span class="token operator">:</span> store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>books<span class="token punctuation">,</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

    <span class="token function">changeInputNewBook</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
            newBookName<span class="token operator">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value
        <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">return</span> <span class="token operator">&lt;</span><span class="token operator">></span>
            <span class="token operator">&lt;</span>TextField onInput<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">changeInputNewBook</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>TextField<span class="token operator">></span>
            <span class="token operator">&lt;</span>Button onClick<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleAddNewBook</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span><span class="token operator">></span>添加<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
            <span class="token punctuation">&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>books<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">book<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
                <span class="token keyword">return</span> <span class="token operator">&lt;</span>p onDoubleClick<span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleRemoveBook</span><span class="token punctuation">(</span>book<span class="token punctuation">.</span>book_name<span class="token punctuation">)</span>
                <span class="token punctuation">&#125;</span>
                <span class="token punctuation">&#125;</span> key<span class="token operator">=</span><span class="token punctuation">&#123;</span>index<span class="token punctuation">&#125;</span><span class="token operator">></span><span class="token punctuation">&#123;</span>book<span class="token punctuation">.</span>book_name<span class="token punctuation">&#125;</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">></span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> Library<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p><img src="http://qiniuyun.quancundexiwang.wang/%E5%8A%A8%E7%94%BB.gif" srcset="/img/loading.gif" alt="动画"></p>
<h3 id="3-3-Action-（执行的指令）"><a href="#3-3-Action-（执行的指令）" class="headerlink" title="3.3 Action （执行的指令）"></a>3.3 <code>Action</code> （执行的指令）</h3><p>可以看到上面的代码我们<code>dispatch</code>的内容，就是我们的<code>Action</code>,可以看到，<code>Action</code> 是一个对象。其中的<code>type</code>属性是必须的，表示<code> Action</code> 的名称。其他属性可以自由设置。</p>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token punctuation">&#123;</span>
  type<span class="token operator">:</span> <span class="token string">"remove_book"</span><span class="token punctuation">,</span>
  value<span class="token operator">:</span> book_name
<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token punctuation">&#123;</span>
  type<span class="token operator">:</span> <span class="token string">'ADD_TODO'</span><span class="token punctuation">,</span>
  payload<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    text<span class="token operator">:</span> <span class="token string">'Do something.'</span>  
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>…..具体看你需要</p>
<blockquote>
<p><code>Action</code>就是执行<code>Reducer</code>手册中的操作指令，完成<code>Store</code>中<code>state</code>的数据操作</p>
</blockquote>
<h3 id="3-4-Action-Creator"><a href="#3-4-Action-Creator" class="headerlink" title="3.4 Action Creator"></a>3.4 <code>Action Creator</code></h3><blockquote>
<p>View 要发送多少种消息，就会有多少种 Action,也有可能在多个View中使用。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">addBook</span><span class="token punctuation">(</span><span class="token parameter">book_name</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
        type<span class="token operator">:</span> <span class="token string">"add_book"</span><span class="token punctuation">,</span>
        value<span class="token operator">:</span> book_name
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>当然你的<code>type</code>也可以封装到一个常量里面，方便以后的修改和维护,可以把它们单独写到一个文件中</p>
<p><code>constant.js</code></p>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">ADD_BOOK</span> <span class="token operator">=</span> <span class="token string">"add_book"</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">REMOVE_BOOK</span> <span class="token operator">=</span> <span class="token string">"remove_book"</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<p><code>libraryActionCreator.js</code></p>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span><span class="token constant">ADD_BOOK</span><span class="token punctuation">,</span><span class="token constant">REMOVE_BOOK</span><span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"@/store/constant"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">addBook</span><span class="token punctuation">(</span><span class="token parameter">book</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
        type<span class="token operator">:</span> <span class="token constant">ADD_BOOK</span><span class="token punctuation">,</span>
        value<span class="token operator">:</span> book
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">remove_book</span><span class="token punctuation">(</span><span class="token parameter">book_name</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
        type<span class="token operator">:</span> <span class="token constant">REMOVE_BOOK</span><span class="token punctuation">,</span>
        value<span class="token operator">:</span> book_name
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><code>libraryReducer.js</code> 也可以使用这些常量，这样到时候修改的时候，只需要去更改常量的js文件的内容就可以啦！</p>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span><span class="token constant">ADD_BOOK</span><span class="token punctuation">,</span> <span class="token constant">REMOVE_BOOK</span><span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"@/store/constant"</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> defaultState <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    libraryName<span class="token operator">:</span> <span class="token string">"CodeHope"</span><span class="token punctuation">,</span>
    books<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">&#123;</span>
            book_name<span class="token operator">:</span> <span class="token string">"狂人日记"</span><span class="token punctuation">,</span>
            book_position<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
        <span class="token punctuation">&#123;</span>
            book_name<span class="token operator">:</span> <span class="token string">"孔乙己"</span><span class="token punctuation">,</span>
            book_position<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
        <span class="token punctuation">&#123;</span>
            book_name<span class="token operator">:</span> <span class="token string">"朝花夕拾"</span><span class="token punctuation">,</span>
            book_position<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
        <span class="token punctuation">&#123;</span>
            book_name<span class="token operator">:</span> <span class="token string">"阿Q正传"</span><span class="token punctuation">,</span>
            book_position<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">LibraryReducer</span><span class="token punctuation">(</span><span class="token parameter">state <span class="token operator">=</span> defaultState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token comment">//添加新的课本的操作</span>
        <span class="token keyword">case</span> <span class="token constant">ADD_BOOK</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
                libraryName<span class="token operator">:</span> state<span class="token punctuation">.</span>libraryName<span class="token punctuation">,</span>
                books<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>state<span class="token punctuation">.</span>books<span class="token punctuation">,</span> action<span class="token punctuation">.</span>value<span class="token punctuation">]</span>
            <span class="token punctuation">&#125;</span>
        <span class="token punctuation">&#125;</span>
        <span class="token comment">//删除新的课本的操作</span>
        <span class="token keyword">case</span> <span class="token constant">REMOVE_BOOK</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">const</span> aimName <span class="token operator">=</span> action<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
            <span class="token keyword">const</span> res <span class="token operator">=</span> state<span class="token punctuation">.</span>books<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
                <span class="token keyword">return</span> item<span class="token punctuation">.</span>book_name <span class="token operator">!==</span> aimName<span class="token punctuation">;</span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
            <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
                libraryName<span class="token operator">:</span> state<span class="token punctuation">.</span>libraryName<span class="token punctuation">,</span>
                books<span class="token operator">:</span> res
            <span class="token punctuation">&#125;</span>
        <span class="token punctuation">&#125;</span>
        <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"default"</span><span class="token punctuation">)</span>
            <span class="token keyword">return</span> state<span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>使用的时候，其实只需要调用对应的<code>actionCreator</code>方法就可以！</p>
<p>首先导入</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span>addBook<span class="token punctuation">,</span>remove_book<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"@/store/libraryActionCreator"</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">addBook</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
    book_name<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>newBookName<span class="token punctuation">,</span>
    book_position<span class="token operator">:</span> position
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">remove_book</span><span class="token punctuation">(</span>book_name<span class="token punctuation">)</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>这样在多个<code>View</code>去使用的话都很方便了！</p>
<h3 id="3-5-store-subscribe"><a href="#3-5-store-subscribe" class="headerlink" title="3.5 store.subscribe()"></a>3.5 <code>store.subscribe()</code></h3><p>当store中的state发生变化的时候，Store 就会调用监听函数。</p>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"state change"</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p><code>store.subscribe</code>方法返回一个函数，调用这个函数就可以解除监听。</p>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> unsubscribe <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"state change"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">unsubscribe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//调用这个函数就可以解除监听。</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="4-Reducer-的拆分"><a href="#4-Reducer-的拆分" class="headerlink" title="4.Reducer 的拆分"></a>4.Reducer 的拆分</h2><h3 id="1-为什么要拆分？"><a href="#1-为什么要拆分？" class="headerlink" title="1.为什么要拆分？"></a>1.为什么要拆分？</h3><p style='color:#035766;background:#feb856;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【Reducer 函数负责生成 State。由于整个应用只有一个 State 对象，包含所有数据，对于大型应用来说，这个 State 必然十分庞大，导致 Reducer 函数也十分庞大。】</p>

<h3 id="2-当前使用的目录结构"><a href="#2-当前使用的目录结构" class="headerlink" title="2.当前使用的目录结构"></a>2.当前使用的目录结构</h3><p>比如我们现在有业务需求，需要将reducer根据业务模块分开！这里分成<code>admin</code>和<code>customer</code>两个reducer的模块</p>
<p>我是使用的下面的这种目录结构，当前的理解是这样了</p>
<p><img src="http://qiniuyun.quancundexiwang.wang/image-20210610210016281.png" srcset="/img/loading.gif" alt="image-20210610210016281"></p>
<ul>
<li><code>index.js</code> 用来写reducer的代码</li>
<li><code>xxxConstance</code> 用来统一管理当前模块下的<code>action</code>操作的<code>type</code></li>
<li><code>xxxActionCreator</code> 就是用来放我们生成action的函数了</li>
</ul>
<p>下面放出一些代码截图</p>
<p><img src="http://qiniuyun.quancundexiwang.wang/image-20210610210408283.png" srcset="/img/loading.gif" alt="image-20210610210408283"></p>
<h3 id="3-多reducer创建store"><a href="#3-多reducer创建store" class="headerlink" title="3.多reducer创建store"></a>3.多reducer创建store</h3><p>然后我们创建store的时候，就使用 <code>combineReducers</code>把多个不同的reducer放入store中</p>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span>createStore<span class="token punctuation">,</span> combineReducers<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"redux"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> admin <span class="token keyword">from</span> <span class="token string">"@/store/modules/adminReducer"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> customer <span class="token keyword">from</span> <span class="token string">"@/store/modules/customerReducer"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>
    <span class="token function">combineReducers</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
        admin<span class="token punctuation">,</span>
        customer
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> store<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>我们看看这个时候的<code>store</code>中的<code>state</code>是什么样的？</p>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p><img src="http://qiniuyun.quancundexiwang.wang/image-20210610211927016.png" srcset="/img/loading.gif" alt="image-20210610211927016"></p>
<p>可以看到两个模块的reducer中的state都被放入了store了</p>
<h3 id="4-配置redux-dev-tools"><a href="#4-配置redux-dev-tools" class="headerlink" title="4.配置redux-dev-tools"></a>4.配置redux-dev-tools</h3><blockquote>
<p>combineReducers+ 配置 <code>Redux-dev-tools</code></p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span>createStore<span class="token punctuation">,</span> combineReducers<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"redux"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> admin <span class="token keyword">from</span> <span class="token string">"@/store/modules/adminReducer"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> customer <span class="token keyword">from</span> <span class="token string">"@/store/modules/customerReducer"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>
    <span class="token function">combineReducers</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
        admin<span class="token punctuation">,</span>
        customer
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
    window<span class="token punctuation">.</span>__REDUX_DEVTOOLS_EXTENSION__ <span class="token operator">&amp;&amp;</span> window<span class="token punctuation">.</span><span class="token function">__REDUX_DEVTOOLS_EXTENSION__</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">//配置调试工具</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> store<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>可以看到是没有问题的啦！</p>
<p><img src="http://qiniuyun.quancundexiwang.wang/image-20210610220043971.png" srcset="/img/loading.gif" alt="image-20210610220043971"></p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%88%86%E7%B1%BB/">分类</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/%E6%A0%87%E7%AD%BE/">标签</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/posts/41906/">
                        <span class="hidden-mobile">原生JS操作cookie</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments">
                
                
  <div id="vcomments"></div>
  <script type="text/javascript">
    Fluid.utils.waitElementVisible('vcomments', function() {
      Fluid.utils.createScript('https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js', function () {
        new Valine({
          el: "#vcomments",
          app_id: "Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz",
          app_key: "hMuhiD4FRqhns4giqLiEH9HG",
          placeholder: "说点什么",
          path: window.location.pathname,
          avatar: "retro",
          meta: ["nick","mail","link"],
          pageSize: "10",
          lang: "zh-CN",
          highlight: false,
          recordIP: false,
          serverURLs: "",
        });
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the
    <a target="_blank" href="https://valine.js.org" rel="nofollow noopener noopener">comments powered by Valine.</a>
  </noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
    

  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        豫ICP备20009912号-1
      </a>
    </span>
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":true,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    
      <script  src="/js/lazyload.js" ></script>
    
  



  
    
  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "http://qiniuyun.quancundexiwang.wang/xmlSearch.xml";
      var inputArea = document.querySelector("#local-search-input");
      inputArea.onclick = function () {
        searchFunc(path, 'local-search-input', 'local-search-result');
        this.onclick = null
      }
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



</body>
</html>
